<template>
    <div>
        <h1>食谱列表</h1>
        食谱名称:
        <input type="text" v-model="data.name">
        食谱分类:
        <select v-model="data.tname">
            <option value="">请选择</option>
            <option :value="a.TypeName" v-for="a in h">{{ a.TypeName }}</option>
        </select>
        <button class="btn btn-info" @click="show">查询</button>
        <table border="1px" class="table table-bordered">
            <tbody>
                <tr>
                    <td>食谱标题</td>
                    <td>菜谱封面</td>
                    <td>标签</td>
                    <td>食谱类型</td>
                    <td>状态</td>
                    <td>营业时间</td>
                    <td>菜谱详情</td>
                </tr>
                <tr v-for="a in info">
                    <td>{{ a.EatName }}</td>
                    <td><img :src="a.Photo" width="60px" height="50px"></td>
                    <td>{{ a.Bqian }}</td>
                    <td>{{ a.TypeName }}</td>
                    <td>{{ a.State == 1 ? " 发布" : "不发布" }}</td>
                    <td>{{ a.GoTime }}</td>
                    <td>{{ a.Aera }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router'
const router = useRouter();

onMounted(() => {
    bind();
    show();
})

let h: any = ref([])

let info: any = ref([])

let data: any = reactive({
    name: '',
    tname: ''
})

//绑定
const bind = () => {
    axios({
        url: 'https://localhost:7118/api/Eat/Bind',
        method: 'get'
    })
        .then((res) => {
            h.value = res.data
        })
}

//显示
const show = () => {
    axios({
        url:'https://localhost:7118/api/Eat/ShowEat',
        method:'get',
        params:data
    })
    .then((res)=>{
        console.log(res.data);
        info.value=res.data
    })
}


</script>

<style scoped></style>